<template>
	<view class="page-account">
		<view class="container" :class="['containerBig']">
			<el-carousel height="400px" class="swiperPross">
				<el-carousel-item class="swiperPic" v-for="(item, index) in swiperList" :key="index">
					<img :src="item.slide" alt="" />
				</el-carousel-item>
			</el-carousel>
			<view class="index_from page-account-container from-wh">
				<view class="page-account-top">
					<view class="page-account-top-logo">
						<img :src="login_logo" alt="logo" style="width: 100%; height: 74px" />
					</view>
				</view>
				<el-form ref="formInline" :model="formInline" :rules="ruleInline"
					@keyup.enter="handleSubmit('formInline')">
					<el-form-item prop="username">
						<el-input type="text" v-model="formInline.username" placeholder="请输入用户名" size="large">
							<template #prefix>
								<el-icon>
									<UserFilled />
								</el-icon>
							</template>
						</el-input>
					</el-form-item>
					<el-form-item prop="password">
						<el-input type="password" v-model="formInline.password" placeholder="请输入密码" size="large"
							show-password>
							<template #prefix>
								<el-icon>
									<Lock />
								</el-icon>
							</template>
						</el-input>
					</el-form-item>
					<el-form-item prop="code" v-if="login_captcha>0">
						<view class="code">
							<el-input type="text" v-model="formInline.code" prefix="ios-keypad-outline"
								placeholder="请输入验证码" size="large" />
							<view v-html="imgcode" class="pictrue" @click="getCode();"></view>
							<!-- <img :src="imgcode" class="pictrue" @click="captchas" /> -->
						</view>
					</el-form-item>
					<el-form-item class="pt10">
						<el-button type="primary" :loading="loading" size="large" @click="handleSubmit('formInline')"
							class="btn">登录</el-button>
					</el-form-item>
				</el-form>
			</view>
		</view>
		<view class="footer">
			<view class="pull-right" v-if="copyright">{{ copyright }}</view>
			<view class="pull-right" v-else>
				Copyright © 2024 <a href="https://www.xxxx.com" target="_blank">{{ version }}</a>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		loginInfo,
		login,
		getinfo,
		vsCode,
		userMenu
	} from '@/api/pc';
	import config from '@/admin.config.js'
	// import { getWorkermanUrl } from '@/api/kefu';
	// import { setCookies } from '@/libs/util';
	// import '@/assets/js/canvas-nest.min';
	// import Verify from '@/components/verifition/Verify';
	// import { PrevLoading } from '@/utils/loading.js';
	// import { formatFlatteningRoutes, findFirstNonNullChildren } from '@/libs/system';

	export default {
		data() {
			return {
				swiperOption: {
					pagination: '.swiper-pagination',
					autoplay: true,
				},
				loading: false,
				isShow: false,
				autoLogin: true,
				imgcode: '',
				formInline: {
					username: '',
					password: '',
				},
				ruleInline: {
					username: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
				},
				login_captcha: 0, //是否开启验证码
				// jigsaw: null,
				login_logo: "/static/logo.png",
				swiperList: [{
					slide: "/static/sw.jpg",
				}],
				key: '',
				copyright: '',
				version: '',
			};
		},
		created() {},
		mounted() {
			this.swiperData();
			this.getCode();
			// this.$vuex('vuex_version', 1000);
			// console.log('this.vuex_version, ', this.vuex_version);
			// console.log('this, ', this);
		},
		methods: {
			getCode() {
				vsCode().then(res => {
					// console.log('vsCode', res);
					this.imgcode = res.data.img;
				})
			},
			swiperData() {
				loginInfo()
					.then((res) => {
						// console.log('loginInfo', res);
						window.document.title = `${res.data.site_name} - 登录`;
						localStorage.setItem('ADMIN_TITLE', res.data.site_name || '');
						// this.$store.commit('setAdminTitle', res.data.site_name);
						let data = res.data || {};
						this.login_logo = data.login_logo ? data.login_logo : uni.getStorageSync("getH5") +
							'/static/logo.png';
						this.swiperList = data.slide.length ? data.slide : [{
							slide: uni.getStorageSync("getH5") + "/static/sw.jpg",
						}];
						this.key = data.key;
						this.copyright = data.copyright;
						this.version = data.version;
						this.login_captcha = data.login_captcha;
					})
					.catch((err) => {
						this.$message.error(err);
						this.login_logo = uni.getStorageSync("getH5") + "/static/logo.png";
						this.swiperList = [{
							slide: uni.getStorageSync("getH5") + "/static/sw.jpg",
						}];
					});
			},
			// 关闭模态框
			closeModel(params) {
				// noinspection JSVoidFunctionReturnValueUsed
				this.loading = true;
				//你自己的登录逻辑
				this.$message("登录中...");
				login(this.formInline).then(res => {
					// console.log(res);
					if (res.code == 200) {
						uni.setStorageSync("token_expired", res.data.token_expired);
						uni.setStorageSync("token", res.data.token);
						uni.setStorageSync("islogin", true);
						getinfo().then(res => {
							// console.log('getinfo', res);
							if (res.code == 200) {
								var data = res.data;
								// 记录用户信息
								uni.setStorageSync("userInfo", data);
								this.login_captcha = 0;
								this.$router.push({
									path: config.index.url,
								});
								// uni.reLaunch({
								// 	url: config.index.url
								// })
							}
						})
						// userMenu().then(res => {
						// 	// console.log('userMenu', res.data);
						// 	uni.setStorageSync("userMenu", res.data.path);
						// 	uni.setStorageSync("permitsList", res.data.list);
						// 	uni.setStorageSync("powerList", res.data.powerList);
						// 	getinfo().then(res => {
						// 		// console.log('getinfo', res);
						// 		if (res.code == 200) {
						// 			var data = res.data;
						// 			// 记录用户信息
						// 			uni.setStorageSync("userInfo", data);
						// 			this.login_captcha = 0;
						// 			this.$router.push({
						// 				path: config.index.url,
						// 			});
						// 			// uni.reLaunch({
						// 			// 	url: config.index.url
						// 			// })
						// 		}
						// 	})
						// })

					} else {
						this.$message.error(res.msg || '登录失败');
						if (res.data) {
							this.login_captcha = res.data.login_captcha;
							this.getCode();
							Object.assign(this.ruleInline, {
								code: [{
									required: true,
									message: '请输入密码',
									trigger: 'blur'
								}]
							})
							// console.log("ruleInline", this.ruleInline);
						}
					}
				})



				// var froms = {
				// 	key: this.key,
				// 	captchaType: 'blockPuzzle',
				// 	captchaVerification: params ? params.captchaVerification : '',
				// };
				// Object.assign(froms, this.formInline);
				// AccountLogin(froms)
				// 	.then(async (res) => {
				// 		let data = res.data;
				// 		let expires = this.getExpiresTime(data.expires_time);
				// 		// 记录用户登陆信息
				// 		uni.setStorageSync("token", xxx);
				// 		this.$store.commit('userInfo/uniqueAuth', data.unique_auth);
				// 		this.$store.commit('userInfo/userInfo', data.user_info);
				// 		// 保存菜单信息
				// 		this.$store.commit('menus/setopenMenus', []);
				// 		this.$store.commit('menus/getmenusNav', data.menus);
				// 		this.$store.dispatch('routesList/setRoutesList', data.menus);
				// 		let arr = formatFlatteningRoutes(this.$router.options.routes);
				// 		this.formatTwoStageRoutes(arr);
				// 		this.$store.commit('menus/setOneLvMenus', arr);
				// 		let routes = formatFlatteningRoutes(data.menus);
				// 		this.$store.commit('menus/setOneLvRoute', routes);
				// 		// 记录用户信息
				// 		this.$store.commit('userInfo/name', data.user_info.account);
				// 		this.$store.commit('userInfo/avatar', data.user_info.head_pic);
				// 		this.$store.commit('userInfo/access', data.unique_auth);
				// 		this.$store.commit('userInfo/logo', data.logo);
				// 		this.$store.commit('userInfo/logoSmall', data.logo_square);
				// 		this.$store.commit('userInfo/version', data.version);
				// 		this.$store.commit('userInfo/newOrderAudioLink', data.newOrderAudioLink);
				// 		this.login_captcha = 0;
				// 		try {
				// 			if (data.queue === false) {
				// 				this.$notify.warning({
				// 					title: '温馨提示',
				// 					dangerouslyUseHTMLString: true,
				// 					message: '您的【消息队列】未开启，没有开启会导致异步任务无法执行。请尽快执行命令开启！！<a href="https://doc.crmeb.com/single/crmeb_v4/7217" target="_blank">点击查看开启方法</a>',
				// 					duration: 30000,
				// 				});
				// 			}
				// 			if (data.timer === false) {
				// 				this.$notify.warning({
				// 					title: '温馨提示',
				// 					dangerouslyUseHTMLString: true,
				// 					message: '您的【定时任务】未开启，没有开启会导致自动收货、未支付自动取消订单、订单自动好评、拼团到期退款等任务无法正常执行。请尽快执行命令开启！！<a href="https://doc.crmeb.com/single/crmeb_v4/7211" target="_blank">点击查看开启方法</a>',
				// 					duration: 30000,
				// 				});
				// 			}

				// 			this.checkSocket();
				// 		} catch (e) {}
				// 		PrevLoading.start();
				// 		return this.$router.push({
				// 			path: res.data.menus.length ? findFirstNonNullChildren(res.data.menus).path :
				// 				this.$routeProStr + '/',
				// 		});
				// 	})
				// 	.catch((res) => {
				// 		let data = res === undefined ? {} : res;
				// 		this.$message.error(data.msg || '登录失败');
				// 		this.login_captcha = res.data.login_captcha;
				// 	});
				setTimeout((e) => {
					this.loading = false;
				}, 1000);
			},
			formatTwoStageRoutes(arr) {
				if (arr.length <= 0) return false;
				const newArr = [];
				const cacheList = [];
				arr.forEach((v) => {
					if (v && v.meta && v.meta.keepAlive) {
						newArr.push({
							...v
						});
						cacheList.push(v.name);
						// this.$store.dispatch('keepAliveNames/setCacheKeepAlive', cacheList);
					}
				});
				return newArr;
			},
			checkSocket() {
				getWorkermanUrl().then((res) => {
					let url = res.data.admin;
					let isNotice = false;
					let socket = new WebSocket(url);
					socket.onopen = () => {
						isNotice = true;
						socket.close();
					};
					socket.onerror = (err) => {
						if (!isNotice) {
							isNotice = true;
							this.$notify.warning({
								title: '温馨提示',
								message: '您的【长连接】未开启，没有开启会导致系统默认客服无法使用,后台订单通知无法收到。请尽快执行命令开启！！<a href="https://doc.crmeb.com/single/crmeb_v4/7219" target="_blank">点击查看开启方法</a>',
								dangerouslyUseHTMLString: true,
								duration: 30000,
							});
						}
					};
					socket.onclose = (err) => {
						if (!isNotice) {
							isNotice = true;
							this.$notify.warning({
								title: '温馨提示',
								message: '您的【长连接】未开启，没有开启会导致系统默认客服无法使用,后台订单通知无法收到。请尽快执行命令开启！！<a href="https://doc.crmeb.com/single/crmeb_v4/7219" target="_blank">点击查看开启方法</a>',
								dangerouslyUseHTMLString: true,
								duration: 30000,
							});
						}
					};
				});
			},
			getExpiresTime(expiresTime) {
				let nowTimeNum = Math.round(new Date() / 1000);
				let expiresTimeNum = expiresTime - nowTimeNum;
				return parseFloat(parseFloat(parseFloat(expiresTimeNum / 60) / 60) / 24);
			},

			closefail() {
				// if (this.jigsaw) this.jigsaw.reset();
				this.$message.error('校验错误');
			},
			handleSubmit(name) {
				this.$refs[name].validate((valid) => {
					if (valid) {
						this.closeModel();
						// if (this.login_captcha == 1) {
						// 	if (this.formInline.code) {
						// 		this.closeModel();
						// 	}
						// } else {
						// 	this.closeModel();
						// }
					}
				});
			},
		},

	};
</script>
<style scoped lang="scss">
	.page-account {
		display: flex;
		width: 100%;
		background-image: url('/static/login-bg.jpg');
		background-size: cover;
		background-position: center;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100vh;
		overflow: auto;
	}

	.page-account .code {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.page-account .code .pictrue {
		height: 40px;
	}

	.swiperPross {
		border-radius: 12px 0px 0px 12px;
	}

	.swiperPross,
	.swiperPic,
	.swiperPic img {
		width: 510px;
		height: 100%;
	}

	.swiperPic img {
		width: 100%;
		height: 100%;
	}

	.container {
		height: 400px !important;
		padding: 0 !important;
		border-radius: 12px;
		z-index: 1;
		display: flex;
	}

	.containerSamll {
		/* width: 56% !important; */
		background: #fff !important;
	}

	.containerBig {
		width: auto !important;
		background: #f7f7f7 !important;
	}

	.index_from {
		padding: 32px 40px 32px 40px;
		height: 400px;
		box-sizing: border-box;
	}

	.page-account-top {
		padding: 20px 0 24px 0 !important;
		box-sizing: border-box !important;
		display: flex;
		justify-content: center;
	}

	.page-account-container {
		border-radius: 0px 6px 6px 0px;
	}

	.btn {
		width: 100%;
		background: linear-gradient(90deg, rgba(25, 180, 241, 1) 0%, rgba(14, 115, 232, 1) 100%) !important;
	}

	.captchaBox {
		width: 310px;
	}

	input {
		display: block;
		width: 290px;
		line-height: 40px;
		margin: 10px 0;
		padding: 0 10px;
		outline: none;
		border: 1px solid #c8cccf;
		border-radius: 4px;
		color: #6a6f77;
	}

	#msg {
		width: 100%;
		line-height: 40px;
		font-size: 14px;
		text-align: center;
	}

	a:link,
	a:visited,
	a:hover,
	a:active {
		margin-left: 100px;
		color: #0366D6;
	}

	.index_from ::v-deep .ivu-input-large {
		font-size: 14px !important;
	}

	.from-wh {
		width: 400px;
	}

	.pull-right {
		// float: right !important;
	}

	::v-deep .el-button--primary {
		border: none;
	}

	::v-deep .el-button {
		padding: 13px 20px !important;
	}

	.pull-right {
		// float: right !important;
		text-align: center;
		color: #ffffff;
	}

	.pull-right a {
		margin-left: 0;
		color: #666;
	}

	.footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
		margin: 0;
		// background: rgba(255, 255, 255, .8);
		// border-top: 1px solid #e7eaec;
		overflow: hidden;
		padding: 10px 20px;
		height: 36px;
		line-height: 18px;
		z-index: 999;

	}
</style>